<template>
	<div>
		<div id="lovesBgc"></div>
		<!-- 点击biubiubiu小心心  start-->
		<div v-for="(item,index) in loves" v-bind:key="index"  v-bind:ref="loves[index].count"  class="img"
		v-bind:style="item.top+item.left+item.scale+item.opacity" style="  float: left;">
			<div class="left"  v-bind:style="item.childBgc"></div>
			<div class="right" v-bind:style="item.childBgc"></div>
			<div class="under" v-bind:style="item.childBgc"></div>
			<div class="text"> {{text[loves[index].textIndex]}}</div>
		</div>
		<!-- 点击biubiubiu小心心  stop-->

		<!-- 上升气泡   start-->
		<div class="bubbels">
			<div v-for="(item,index) in bubbles" v-bind:key="index" class="bubble"
				v-bind:style="item.color+item.width+item.height+item.left+
				item.delay+item.duration">
			</div>
		</div>
		<!-- 上升气泡   stop-->
	</div>
</template>

<script>
	export default {
	  data(){
			const text = ["佘雪楠~", "我喜欢你~", "我爱你~", "哎呀呀~", "mua~", "大美女", "想你", "咦~"];
			const loves = [];
			const bubbles = [];
			// count:1,top:'200px',left:'200px',translateY:'-40px',transform:0.5,opacity:0.5
			return {
				text : text,  //小心心上边显示的文字
				textIndex : 0,  //小心心数组下标
				loves : loves, //小心心样式
				count : 0,   //创建元素个数
				bubbles : bubbles
			}
		},
		methods: {
		   // 创建小心心
			createLoves(event) {
				let x = 0;
				let y = 0;
				let index = 0;//text文本下标
				let color = "background-color:rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ");";
				index = Math.floor(Math.random()* this.text.length) ;
				console.log(this.text[index]);
				x = event.clientX - 10;
				y = event.clientY  - 17;

				console.log('x:'+x+' y:'+y+' color:'+color);
				let style = {
					count : 'img' + ++this.count,//
					top : 'top:' + y + 'px;',
					left : 'left:' + x + 'px;',
					opacity : 'opacity:' + 0.5 + ';',
					childBgc : color,
					textIndex : index,
					scale : 'transform: scale(' + 1 + ');',
					// scale : 'left:' + 1
				};
				this.loves.push(style);
				//在点击鼠标时更新一次泡泡的位置
				this.updateBubble();
			},
			removeSmallHert(){
				this.loves[this.count-1].opacity = 'opacity:' + 0 + ';',
				this.loves[this.count-1].scale = 'transform:translateY(' + -80 + 'px) scale(' + 0.5 + ');'
			},
			createBubble(){
				let left = [10, 20, 35, 50, 55, 65, 75, 80, 70, 85,77];
				let wh = [40, 20, 50, 80, 35, 45, 25, 80, 15, 50, 77];
				let duration = [8, 5, 10, 7, 6, 8, 7, 6, 9, 5, 8];
				let	delay = [0, 1, 1, 0, 0, 0, 2, 1, 0, 3, 2];
				let color = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")";
				let bubble={}
				for (var i = 0; i < 11; i++) {
					// console.log(wh[i]);
					bubble = {
						left   : 'left:' + Math.floor((Math.random() * 80) + 10)　+'%;',
						width  : 'width:' + wh[i]+'px;',
						color  : 'background-color:' + color + ';',
						height : 'height:' + wh[i]+'px;',
						delay    : 'animation-delay:' + delay[i] + 's;',
						duration : 'animation-duration:' + duration[i] + 's;',
					}
					// console.log('bubble'+bubble.color);
					this.bubbles.push(bubble);
					//使用随机生成位置，但是显然具有不可控性
					// wh = Math.floor((Math.random()) * 65 + 15);
					// left = Math.floor((Math.random()) * 75 + 15) ;
					// duration = Math.floor(Math.random() * 11) % 6 + 5;
					// delay = Math.floor((Math.random() * 6) % 3 + 1) * Math.floor(Math.random() * 2) % 2;
					color = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")";
					// this.sleep(1000);
					// console.log(i+'size:'+this.bubbles.length)
				}
			},
			updateBubble(){
				//更新泡泡的位置
				let a=Math.floor(Math.random() * 80) + 10;
				this.bubbles[Math.floor(Math.random() * 11)].left =  'left:' + a +'%';
			}
		},
		beforeMount() {
			this.createBubble()
		}
	}
</script>

<style lang="stylus" scoped>
  @-webkit-keyframes flyingEven
  	0%
  		bottom 0px
  		transform translateX(0)
  	25%
  		transform translateX(-200px)
  	50%
  		transform: translateX(0)
  	100%
  		bottom: 1080px
  		transform translateX(150px)
  @-webkit-keyframes flyingOdd
  	0%
  		bottom 0px
  		transform translateX(0)
  	25%
  		transform translateX(50px)
  	50%
  		transform translateX(-50px)
  	75%
  		transform translateX(-80px)
  	100%
  		bottom 1080px
  		transform translateX(180px)

	#lovesBgc
		position absolute
		top 0
		left 0
		width 100%
		height 100%
		overflow hidden
		position absolute
		width 100%
		height 100%
		z-index 0
		overflow hidden
		top 0
		left 0
		z-index -1
	.img
    width 20px
    height 20px
    opacity 1
    position absolute
    z-index 1000
    transition 2.5s
	.left,.right
    width 10px
    height 10px
    border-radius 100%
    position absolute
	.right
    right 0
	.under
    width 10px
    height 10px
    position absolute
    top 5px
    left 5px
    transform rotate(45deg)
	.text
    width 50px
    font-size 10px
    line-height 1
    position absolute
    top -1em
    left -15px
    text-align center
  .bubbels
    position fixed
    width 100%
    left 0
    top 0
    bottom 0
    z-index 1
	.bubble
		position absolute
		bottom 0
		border-radius 50%
		opacity 0.2
		z-index 1
		animation flying 10s infinite ease-in
	.bubble:nth-child(odd)
		animation flyingOdd 10s infinite ease-in

	.bubble:nth-child(even)
		animation flyingEven 10s infinite ease-in
</style>
